<template>
  <div class="password-input-wrapper">
    <input :type="ifShowPwd ? 'text' : 'password'"
    :placeholder="placeholder" @change.stop="$emit('change', $event)">
    <i class="iconfont icon-eye show-pwd-btn"
    :class="{colorBlue: ifShowPwd}" @click="toggleShowPwd"></i>
  </div>
</template>

<script>
  export default {
    props: {
      placeholder: {
        type: String,
        default: () => "请输入密码"
      },
    },
    data() {
      return {
        ifShowPwd: false
      }
    },
    methods: {
      toggleShowPwd() {
        this.ifShowPwd = !this.ifShowPwd
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--passwordInputWidth);
@h: var(--passwordInputHeight);
@fs: var(--passwordInputFontsize);
@atom: calc(@fs / 15);

.password-input-wrapper {
  box-sizing: border-box;
  width: @w;
  height: @h;

  border-radius: calc(@fs / 5);
  border-bottom: @atom solid #ddd;
  transition: .1s;

  &:focus-within {
    box-shadow: calc(@atom * 2) calc(@atom * 2) calc(@atom * 3) #ccc;
  }
  
  input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: @h;
    font-size: @fs;
    padding: 0 calc(@fs / 2);
    background-color: transparent;
  }

  .show-pwd-btn {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    font-size: @fs;

    &:hover {
      cursor: pointer;
      color: var(--blue);
    }
  }
}
</style>